<template>
  <div class="step-container">
    <div class="left">
      <div class="left-title">Order Detail</div>
      <el-button @click="handleAdd" size="mini">add</el-button>
      <i class="iconfont iconshopshoppingco"></i>
      <img class="car-gif"  src="../../../assets/img/car.gif" :style="{left:left}"  />
      <el-steps :active="num" align-center style="margin-top:80px;">
        <el-step title="purchase" description="03-01 10:02:22"></el-step>
        <el-step title="payment" description="03-02 10:02:22"></el-step>
        <el-step title="shipment" description="03-03 10:02:22"></el-step>
        <el-step title="complate transactipon" description="03-01 10:02:22"></el-step>
      </el-steps>
    </div>
    <div class="right">
      <div class="title">Views</div>
      <i class="iconfont icontongji"></i>
      <orderlineChart/>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      num:1,
      left:'8%'
    }
  },
  methods:{
    handleAdd(){
      this.num++
      if(this.num == 1){
        this.left = '8%'
      }else if(this.num == 2){
        this.left = '28%'
      }else if(this.num == 3){
        this.left = '49%'
      }else{
        this.left = '66%'
      }
    }
  }
}
</script>



<style lang="scss" scoped>
.step-container {
  display: flex;
  height: 300px;
  flex-direction: row;
  margin-top: 20px;
  position: relative;
  .left {
    flex: 4;
    background: #ffffff;
    margin-right: 5px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
    padding: 25px;
    .iconfont{
      font-size: 190px;
      opacity: 0.05;
      top: 90px;
      font-weight: bold;
      position: absolute
    }
    .car-gif{
      width: 100px;
      height: 100px;
      position: absolute;
      top:70px;
      transform: rotateY(180deg); 
    }
    .left-title {
      font-size: 28px;
      margin-bottom: 40px;
      display: inline-block;
    }
  }
  .left /deep/ .el-step__icon.is-text {
    background: #409eff !important;
  }
  .left /deep/ .el-step__head.is-process .el-step__icon.is-text{
      background: #ffffff !important;
      color: #ffffff;
      border-color: #409eff;
  }
  .left /deep/.el-step__icon-inner{
    color: #409eff;
  }
  .right {
    position: relative;
    overflow: hidden;
    .title{
      font-size: 24px;
      position: relative;
      left: 10px;
      top: 20px;
    }
   
    .iconfont{
      font-size: 340px;
      opacity: 0.05;
      right: 0;
      bottom: -60px;
      position: absolute
    }
  
    flex: 1;
    margin-left: 5px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
  }
}
</style>
